<template>
	<div class="page" :style="{backgroundImage: 'url(' + imgurl + ')'}">
		<div class="main flex flex-item-center flex-c" >
			<div v-for="(item, index) in allData" class="section" :style="{backgroundImage: 'url(' + item.img + ')'}" @click="goNormGoods(item.id, item.normId)">
				<div v-if="index % 2 == 1" class="anotherItem">
					<p class="title float-r">{{item.pTitle}}</p>
					<div class="line float-r"></div>
					<div class="fourLabel flex float-r">
						<span v-for="data in item.fourLabel" class="label">{{data.label}}</span>
					</div>
					<p class="pmain float-r">{{item.pMain}}</p>
					<div class="underline float-r"></div>
					<p class="priceParent float-r">销售价:
						<span class="price">{{item.price}}元</span>
					</p>
					<div class="activePriceParent flex flex-item-center float-r">
						<div class="active flex flex-item-end">
							<span class="activeText">会员价:</span>
							<span class="activePrice">{{item.activePrice}}</span>
						</div>
					</div>
				</div>
				<div v-else class="item">
					<p class="title">{{item.pTitle}}</p>
					<div class="line"></div>
					<div class="fourLabel flex">
						<span v-for="data in item.fourLabel" class="label">{{data.label}}</span>
					</div>
					<p class="pmain">{{item.pMain}}</p>
					<div class="underline"></div>
					<p class="priceParent">销售价:
						<span class="price">{{item.price}}元</span>
					</p>
					<div class="activePriceParent flex flex-item-center">
						<div class="active">
							<span class="activeText">会员价:</span>
							<span class="activePrice">{{item.activePrice}}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Utils from '@/util/util';
	
	export default {
		data() {
			return {
				imgurl:require('../../../assets/imgs/20180509/bgimg.jpeg'),
				token: '',
				allData: [{
					normId: '9218',
					id: '7143',
					img: require('../../../assets/imgs/20180509/item3.png'),
					title: 'NURSERY 肌肤舒缓柚子味卸妆凝露啫喱 180ml',
					pTitle: '啫喱质地 清爽水润',
					fourLabel: [{
						label: '水润'
					}, {
						label: '紧致'
					}, {
						label: '卸妆'
					}, {
						label: '洁面'
					}],
					pMain: 'NURSERY 肌肤舒缓柚子味卸妆...',
					price: '104',
					activePrice: '68'
				}, {
					normId: '4561',
					id: '3832',
					img: require('../../../assets/imgs/20180509/item4.png'),
					title: '日本LaboLabo城野医生 毛孔收缩收敛水保湿控油100ml',
					pTitle: '温和毛孔 清洁黑头角栓',
					fourLabel: [{
						label: '控油'
					}, {
						label: '清洁'
					}, {
						label: '渗透'
					}, {
						label: '细致'
					}],
					pMain: '日本LaboLabo城野医生爽肤水',
					price: '139',
					activePrice: '65'
				}, {
					id: '5878',
					normId: '9860',
					img: require('../../../assets/imgs/20180509/item1.png'),
					title: '[香港直邮]JM全身防水防晒喷雾180ml 17730',
					pTitle: '防晒新势力 拒当黑美人',
					fourLabel: [{
						label: '清爽'
					}, {
						label: '滋养'
					}, {
						label: '亮泽'
					}, {
						label: '保湿'
					}],
					pMain: 'JM全身防水防晒喷雾180ml',
					price: '79',
					activePrice: '51'
				}, {
					normId: '9710',
					id: '7362',
					img: require('../../../assets/imgs/20180509/item2.png'),
					title: 'DPC美容仪器家用面脸部提拉按摩器超声波刀去皱排毒离子导入仪',
					pTitle: '熨平细纹 焕醒肌底活力',
					fourLabel: [{
						label: '淡化'
					}, {
						label: '提拉'
					}, {
						label: '紧致'
					}, {
						label: '修复'
					}],
					pMain: 'DPC美容仪器家用面脸部提...',
					price: '1899',
					activePrice: '1599'
				}, {
					normId: '6970',
					id: '5869',
					img: require('../../../assets/imgs/20180509/item5.png'),
					title: '[2盒装]韩国 春雨面膜 papa recipe蜂蜜保湿补水面膜贴10片 黄色1695',
					pTitle: '天然蜂胶 补充营养',
					fourLabel: [{
						label: '补水'
					}, {
						label: '保湿'
					}, {
						label: '滋养'
					}, {
						label: '润肤'
					}],
					pMain: '[2盒装]韩国 蜂蜜面膜贴10片',
					price: '169',
					activePrice: '148'
				}, {
					normId: '8004',
					id: '6396',
					img: require('../../../assets/imgs/20180509/item6.png'),
					title: '[2支][香港直邮]资生堂UNO男士洗面奶130g （蓝色深层清洁）',
					pTitle: '无惧阳光 清爽防晒',
					fourLabel: [{
						label: '控油'
					}, {
						label: '清洁'
					}, {
						label: '洁净'
					}, {
						label: '防晒'
					}],
					pMain: '[2支]资生堂UNO男士洗面奶',
					price: '65',
					activePrice: '54'
				}],
				flag: false
			}
		},
		methods: {
			goNormGoods: function(goodId, normId) {
				let self = this;
				if(this.flag) return;
				this.flag = true;
				Utils.goNormGoods(goodId, normId);
				setTimeout(() => {
					self.flag = false
				}, 1000);
			}
		},
	}
</script>

<style lang='less' scoped>
	@import '~@/assets/less/main.less';
	.page {
		background-size: 100% 100%;
		height: 42.4rem;
	}
	
	p {
		margin: 0;
	}
	
	.float-r {
		float: right;
		:after {
			clear: both;
		}
	}
	
	.main {
		padding: 10.38rem 0rem 0rem 0rem;
	}
	
	.section {
		width: 6.9rem;
		height: 4.3rem;
		background-size: 100% 100%;
		margin-bottom: .3rem;
	}
	
	.section:nth-child(2n+1) {
		width: 6.9rem;
		height: 4.3rem;
		background-size: 100% 100%;
		margin-bottom: .3rem;
		display: flex;
		display: -webkit-flex;
		align-items: flex-end;
		justify-content: flex-end;
	}
	
	.item,
	.anotherItem {
		width: 3.82rem;
		height: 4.3rem;
		.title {
			font-size: .32rem;
			color: #d6a00e;
			padding: .66rem 0rem .13rem 0rem;
			margin: 0;
		}
		.line {
			width: 3.62rem;
			height: 0;
			border-top: 1px #d6a00e dashed;
			margin-bottom: .2rem;
		}
		.underline {
			width: 3.62rem;
			height: 0;
			border-top: 1px #d6a00e dashed;
		}
		.fourLabel {
			border: 1px #d6a00e solid;
			height: .4rem;
			width: 3.27rem;
			border-radius: .2rem;
			color: #d6a00e;
			font-size: .2rem;
			justify-content: space-around;
			margin-bottom: .1rem;
			.label {
				height: .4rem;
				line-height: .4rem;
			}
		}
		.pmain {
			color: #020202;
			font-size: .25rem;
			margin-bottom: .15rem;
		}
		.priceParent {
			margin: .28rem 0 .05rem 0;
			width: 2.46rem;
			text-align: center;
			font-size: .2rem;
			color: #999999;
		}
		.activePriceParent {
			height: .55rem;
			width: 2.46rem;
			background-color: #d6a00e;
			border-radius: 0.05rem;
			.active {
				height: .4rem;
				vertical-align: bottom;
				.activeText {
					font-size: .2rem;
					display: inline-block;
					color: #ffffff;
					height: .4rem;
					line-height: .4rem;
				}
				.activePrice {
					display: inline-block;
					font-size: .4rem;
					color: #FFFFFF;
					height: .4rem;
					line-height: .4rem;
				}
			}
		}
	}
</style>